<template>
  <div class="myHomeTop">
    <div class="ui container">
      <sui-grid>
        <sui-grid-column :width="4">
          <sui-menu fluid vertical tabular>
            <el-menu :default-active="defaultActive" @select="choseItem" active-text-color="#00b5ad">
              <el-menu-item index="1">我的头像</el-menu-item>
              <el-menu-item index="2">我的信息</el-menu-item>
              <el-menu-item index="3">修改密码</el-menu-item>
            </el-menu>
          </sui-menu>
        </sui-grid-column>

        <sui-grid-column :width="12">
          <div v-if="this.$router.currentRoute.path == '/myHome'">
            <div class="ui segment">
              <h3 class="ui teal header left aligned">我的头像</h3>
              <el-divider></el-divider>
              <div class="ui container">
                <el-avatar class="ui small circular centered image" :src="img_url + userInfo"/>
                <div class="margin_small">
                  <sui-button circular color="teal" @click="uploadProfile = true" content="修改头像" />
                </div>
              </div>
            </div>
          </div>
          <!-- 上传头像 dialog弹窗-->
          <el-dialog title="上传头像" width="420px" :visible.sync="uploadProfile" :before-close="beforeDialogClose">
            <!-- drag upload -->
            <el-upload class="upload-demo" ref="upload" drag accept=".jpg,.jpeg,.png,.gif" list-type="picture"
              :auto-upload="false" action="no_use" :on-change="onchangeUpload">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png/gif文件，且不超过5MB</div>
            </el-upload>
            <!-- 头像预览子弹窗 -->
            <el-dialog width="30%" title="预览头像" :visible.sync="confirmProfile" append-to-body
              :before-close="beforeDialogClose">
              确认更改头像如下吗？<br>
              <div align="center">
                <el-image style="width: 200px; height: 200px" :src="previewImgURL" fit="cover"></el-image>
              </div>
              <div slot="footer" class="dialog-footer">
                <el-button @click="confirmCancel">换一个</el-button>
                <el-button type="primary" @click="submitHead">确认</el-button>
              </div>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancelAvatarUpload">取 消</el-button>
            </div>
          </el-dialog>
          <router-view />
        </sui-grid-column>
      </sui-grid>
    </div>
  </div>
</template>

<script>
export default {
  inject:['reload'],
  data() {
    return {
      img_url: 'http://1.14.48.193:8888/img/',
      userInfo: sessionStorage.getItem('headImg'),
      defaultActive: '1',        //默认激活菜单
      imageUrl: '',
      // 上传头像对话框显示与否
      uploadProfile: false,
      confirmProfile: false,
      previewImgURL: '',         //预览照片 
      updateImg:'',             //上传照片
    };
  },
  methods: {
    choseItem(key) {
      if (key == '1')
        this.$router.push('/myHome');
      else if (key == '2')
        this.$router.push('/myHome/myInformation');
      else if (key == '3')
        this.$router.push('/myHome/changePswd');
    },
    submitHead() {
      const loading = this.$loading({
        lock: true,
        text: '头像上传中',
      });
      var formData = new FormData();
      formData.append("img", this.updateImg.raw);
      this.$https.post('/user/updateProfile', formData).then((resp) => {
        console.log(resp);
        if(resp.data.code == 200)
        {
          this.$message.success("头像更新成功！");
          sessionStorage.setItem('headImg',resp.data.data);
          loading.close();
          this.confirmProfile = false;
          this.reload();
        }else{
          loading.close();
          this.confirmProfile = false;
          this.$message.info(resp.data.message);
        }
      })
    },
    /* 上传头像对话框 */
    beforeDialogClose(done) { // 用户临时退出上传头像，应清空
      this.$refs.upload.clearFiles()
      done()
    },
    cancelAvatarUpload() { // 用户临时退出上传头像，应清空
      this.uploadProfile = false
      this.$refs.upload.clearFiles()
    },
    onchangeUpload(file) {
      // 预保存上传的图片
      // 限制上传文件的大小
      const isLt = file.size / 1024 / 1024 / 5 <= 1;
      if (!isLt) {
        this.$message.error("上传文件大小不得大于5MB!");
      } else {
        this.uploadProfile = false;
        this.previewImgURL = URL.createObjectURL(file.raw);
        this.updateImg = file;
        this.confirmProfile = true // 预览图片
      }
      return;
    },
    confirmCancel() {
      this.confirmProfile = false;
      this.uploadProfile = true;
      this.previewImgURL = null;
      this.updateImg = null;
      this.$refs.upload.clearFiles();
    },
  },
  mounted() {
    if (this.$router.currentRoute.path == '/myHome/myInformation')
      this.defaultActive = '2';
    else if (this.$router.currentRoute.path == '/myHome/changePswd')
      this.defaultActive = '3';
  },

}
</script>

<style scoped>
.myHomeTop {
  padding-top: 5em !important;
  padding-bottom: 5em !important;
}

.margin_small {
  margin: 0.5em 0 0 0 !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>